<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全选、不选、反选</title>
</head>
<body>
    <button class='choose'>全选</button>
    <button class='notChoose'>不选</button>
    <button class='contrary'>反选</button>
    <div>
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
    </div>

    <script>
        var btns = document.getElementsByTagName('button');
        var inputs = document.getElementsByTagName('input');

        for(var i=0;i<btns.length;i++){
            btns[i].onclick = function(){

                /* 1、通过this获取对应buttom的classname
                console.log(this.className); */

                /* 2、通过innerHTML内容获取相对于button */

                for(var j=0;j<inputs.length;j++){
                    // 全选
                    if(this.className == 'choose'){
                        inputs[j].checked = true;
                    // 不选
                    }else if(this.className == 'notChoose'){
                        inputs[j].checked = false;
                    // 反选
                    }else{
                        inputs[j].checked = !inputs[j].checked;
                    }
                }
            }
        }
    </script>
</body>
</html>